<!DOCTYPE html>
<html
  lang="en"
  data-bs-theme="light"
  data-menu-color="brand"
  data-topbar-color="light"
>
  <head>
    <meta charset="utf-8" />
    <title>
      Form Elements | Dashtrap - Responsive Bootstrap 5 Admin Dashboard
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      content="A fully featured admin theme which can be used to build CRM, CMS, etc."
      name="description"
    />
    <meta content="Myra Studio" name="author" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="../src/assets/images/favicon.ico" />

    <!-- App css -->
    <link
      href="../src/assets/css/style.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../src/assets/css/icons.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="../src/assets/js/config.js"></script>
  </head>

  <body>
    <!-- Begin page -->
    <div class="layout-wrapper">
      <!-- ========== Left Sidebar ========== -->
      <div class="main-menu">
        <!-- Brand Logo -->
        <div class="logo-box">
          <!-- Brand Logo Light -->
          <a href="index.html" class="logo-light">
            <img
              src="../src/assets/images/logo-light.png"
              alt="logo"
              class="logo-lg"
              height="28"
            />
            <img
              src="../src/assets/images/logo-sm.png"
              alt="small logo"
              class="logo-sm"
              height="28"
            />
          </a>

          <!-- Brand Logo Dark -->
          <a href="index.html" class="logo-dark">
            <img
              src="../src/assets/images/logo-dark.png"
              alt="dark logo"
              class="logo-lg"
              height="28"
            />
            <img
              src="../src/assets/images/logo-sm.png"
              alt="small logo"
              class="logo-sm"
              height="28"
            />
          </a>
        </div>

        <!--- Menu -->
        <div data-simplebar>
          <ul class="app-menu">
            <li class="menu-title">Menu</li>

            <li class="menu-item">
              <a href="index.html" class="menu-link waves-effect waves-light">
                <span class="menu-icon"><i class="bx bx-home-smile"></i></span>
                <span class="menu-text"> Dashboards </span>
                <span class="badge bg-primary rounded ms-auto">01</span>
              </a>
            </li>

            <li class="menu-title">Custom</li>

            <li class="menu-item">
              <a
                href="apps-calendar.html"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-calendar"></i></span>
                <span class="menu-text"> Calendar </span>
              </a>
            </li>

            <li class="menu-item">
              <a
                href="#menuExpages"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-file"></i></span>
                <span class="menu-text"> Extra Pages </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuExpages">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="pages-starter.html" class="menu-link">
                      <span class="menu-text">Starter</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-invoice.html" class="menu-link">
                      <span class="menu-text">Invoice</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-login.html" class="menu-link">
                      <span class="menu-text">Log In</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-register.html" class="menu-link">
                      <span class="menu-text">Register</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-recoverpw.html" class="menu-link">
                      <span class="menu-text">Recover Password</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-lock-screen.html" class="menu-link">
                      <span class="menu-text">Lock Screen</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-404.html" class="menu-link">
                      <span class="menu-text">Error 404</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-500.html" class="menu-link">
                      <span class="menu-text">Error 500</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuLayouts"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-layout"></i></span>
                <span class="menu-text"> Layouts </span>
                <span class="badge bg-blue ms-auto">New</span>
              </a>
              <div class="collapse" id="menuLayouts">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="layout-horizontal.html" class="menu-link">
                      <span class="menu-text">Horizontal</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-sidenav-light.html" class="menu-link">
                      <span class="menu-text">Sidenav Light</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-sidenav-dark.html" class="menu-link">
                      <span class="menu-text">Sidenav Dark</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-topbar-dark.html" class="menu-link">
                      <span class="menu-text">Topbar Dark</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-title">Components</li>

            <li class="menu-item">
              <a
                href="#menuComponentsui"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-cookie"></i></span>
                <span class="menu-text"> UI Elements </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuComponentsui">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="ui-alerts.html" class="menu-link">
                      <span class="menu-text">Alerts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-buttons.html" class="menu-link">
                      <span class="menu-text">Buttons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-cards.html" class="menu-link">
                      <span class="menu-text">Cards</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-carousel.html" class="menu-link">
                      <span class="menu-text">Carousel</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-dropdowns.html" class="menu-link">
                      <span class="menu-text">Dropdowns</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-video.html" class="menu-link">
                      <span class="menu-text">Embed Video</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-general.html" class="menu-link">
                      <span class="menu-text">General UI</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-grid.html" class="menu-link">
                      <span class="menu-text">Grid</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-images.html" class="menu-link">
                      <span class="menu-text">Images</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-list-group.html" class="menu-link">
                      <span class="menu-text">List Group</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-modals.html" class="menu-link">
                      <span class="menu-text">Modals</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-offcanvas.html" class="menu-link">
                      <span class="menu-text">Offcanvas</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-placeholders.html" class="menu-link">
                      <span class="menu-text">Placeholders</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-progress.html" class="menu-link">
                      <span class="menu-text">Progress</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-spinners.html" class="menu-link">
                      <span class="menu-text">Spinners</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-tabs-accordions.html" class="menu-link">
                      <span class="menu-text">Tabs & Accordions</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-tooltips-popovers.html" class="menu-link">
                      <span class="menu-text">Tooltips & Popovers</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-typography.html" class="menu-link">
                      <span class="menu-text">Typography</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuExtendedui"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"
                  ><i class="bx bx-briefcase-alt-2"></i
                ></span>
                <span class="menu-text"> Components </span>
                <span class="badge bg-info ms-auto">Hot</span>
              </a>
              <div class="collapse" id="menuExtendedui">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="components-range-slider.html" class="menu-link">
                      <span class="menu-text">Range Slider</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="components-sweet-alert.html" class="menu-link">
                      <span class="menu-text">Sweet Alert</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="components-loading-buttons.html" class="menu-link">
                      <span class="menu-text">Loading Buttons</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuIcons"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-aperture"></i></span>
                <span class="menu-text"> Icons </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuIcons">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="icons-feather.html" class="menu-link">
                      <span class="menu-text">Feather Icons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="icons-mdi.html" class="menu-link">
                      <span class="menu-text">Material Design Icons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="icons-dripicons.html" class="menu-link">
                      <span class="menu-text">Dripicons</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuForms"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bxs-eraser"></i></span>
                <span class="menu-text"> Forms </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuForms">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="forms-elements.html" class="menu-link">
                      <span class="menu-text">General Elements</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-advanced.html" class="menu-link">
                      <span class="menu-text">Advanced</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-validation.html" class="menu-link">
                      <span class="menu-text">Validation</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-quilljs.html" class="menu-link">
                      <span class="menu-text">Editor</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-file-uploads.html" class="menu-link">
                      <span class="menu-text">File Uploads</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuTables"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-table"></i></span>
                <span class="menu-text"> Tables </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuTables">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="tables-basic.html" class="menu-link">
                      <span class="menu-text">Basic Tables</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="tables-datatables.html" class="menu-link">
                      <span class="menu-text">Data Tables</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuCharts"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"
                  ><i class="bx bx-doughnut-chart"></i
                ></span>
                <span class="menu-text"> Charts </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuCharts">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="charts-apex.html" class="menu-link">
                      <span class="menu-text">Apex Charts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="charts-morris.html" class="menu-link">
                      <span class="menu-text">Morris Charts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="charts-chartjs.html" class="menu-link">
                      <span class="menu-text">Chartjs Charts</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuMaps"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-map-alt"></i></span>
                <span class="menu-text"> Maps </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuMaps">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="maps-google.html" class="menu-link">
                      <span class="menu-text">Google Maps</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="maps-vector.html" class="menu-link">
                      <span class="menu-text">Vector Maps</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuMultilevel"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-share-alt"></i></span>
                <span class="menu-text"> Multi Level </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuMultilevel">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a
                      href="#menuMultilevel2"
                      data-bs-toggle="collapse"
                      class="menu-link waves-effect waves-light"
                    >
                      <span class="menu-text"> Second Level </span>
                      <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="menuMultilevel2">
                      <ul class="sub-menu">
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 1</span>
                          </a>
                        </li>
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 2</span>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </li>

                  <li class="menu-item">
                    <a
                      href="#menuMultilevel3"
                      data-bs-toggle="collapse"
                      class="menu-link waves-effect waves-light"
                    >
                      <span class="menu-text">Third Level</span>
                      <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="menuMultilevel3">
                      <ul class="sub-menu">
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 1</span>
                          </a>
                        </li>
                        <li class="menu-item">
                          <a
                            href="#menuMultilevel4"
                            data-bs-toggle="collapse"
                            class="menu-link waves-effect waves-light"
                          >
                            <span class="menu-text">Item 2</span>
                            <span class="menu-arrow"></span>
                          </a>
                          <div class="collapse" id="menuMultilevel4">
                            <ul class="sub-menu">
                              <li class="menu-item">
                                <a
                                  href="javascript: void(0);"
                                  class="menu-link"
                                >
                                  <span class="menu-text">Item 1</span>
                                </a>
                              </li>
                              <li class="menu-item">
                                <a
                                  href="javascript: void(0);"
                                  class="menu-link"
                                >
                                  <span class="menu-text">Item 2</span>
                                </a>
                              </li>
                            </ul>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- Start Page Content here -->
      <div class="page-content">
        <!-- ========== Topbar Start ========== -->
        <div class="navbar-custom">
          <div class="topbar">
            <div class="topbar-menu d-flex align-items-center gap-lg-2 gap-1">
              <!-- Brand Logo -->
              <div class="logo-box">
                <!-- Brand Logo Light -->
                <a href="index.html" class="logo-light">
                  <img
                    src="../src/assets/images/logo-light.png"
                    alt="logo"
                    class="logo-lg"
                    height="22"
                  />
                  <img
                    src="../src/assets/images/logo-sm.png"
                    alt="small logo"
                    class="logo-sm"
                    height="22"
                  />
                </a>

                <!-- Brand Logo Dark -->
                <a href="index.html" class="logo-dark">
                  <img
                    src="../src/assets/images/logo-dark.png"
                    alt="dark logo"
                    class="logo-lg"
                    height="22"
                  />
                  <img
                    src="../src/assets/images/logo-sm.png"
                    alt="small logo"
                    class="logo-sm"
                    height="22"
                  />
                </a>
              </div>

              <!-- Sidebar Menu Toggle Button -->
              <button class="button-toggle-menu">
                <i class="mdi mdi-menu"></i>
              </button>
            </div>

            <ul class="topbar-menu d-flex align-items-center gap-4">
              <li class="d-none d-md-inline-block">
                <a class="nav-link" href="" data-bs-toggle="fullscreen">
                  <i class="mdi mdi-fullscreen font-size-24"></i>
                </a>
              </li>

              <li class="dropdown">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <i class="mdi mdi-magnify font-size-24"></i>
                </a>
                <div
                  class="dropdown-menu dropdown-menu-animated dropdown-menu-end dropdown-lg p-0"
                >
                  <form class="p-3">
                    <input
                      type="search"
                      class="form-control"
                      placeholder="Search ..."
                      aria-label="Recipient's username"
                    />
                  </form>
                </div>
              </li>

              <li class="dropdown d-none d-md-inline-block">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <img
                    src="../src/assets/images/flags/us.jpg"
                    alt="user-image"
                    class="me-0 me-sm-1"
                    height="18"
                  />
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-menu-animated"
                >
                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/germany.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">German</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/italy.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Italian</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/spain.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Spanish</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/russia.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Russian</span>
                  </a>
                </div>
              </li>

              <li class="dropdown notification-list">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <i class="mdi mdi-bell font-size-24"></i>
                  <span class="badge bg-danger rounded-circle noti-icon-badge"
                    >9</span
                  >
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg py-0"
                >
                  <div
                    class="p-2 border-top-0 border-start-0 border-end-0 border-dashed border"
                  >
                    <div class="row align-items-center">
                      <div class="col">
                        <h6 class="m-0 font-size-16 fw-semibold">
                          Notification
                        </h6>
                      </div>
                      <div class="col-auto">
                        <a
                          href="javascript: void(0);"
                          class="text-dark text-decoration-underline"
                        >
                          <small>Clear All</small>
                        </a>
                      </div>
                    </div>
                  </div>

                  <div class="px-1" style="max-height: 300px" data-simplebar>
                    <h5 class="text-muted font-size-13 fw-normal mt-2">
                      Today
                    </h5>
                    <!-- item-->

                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card unread-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-primary">
                              <i class="mdi mdi-comment-account-outline"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Datacorp
                              <small class="fw-normal text-muted ms-1"
                                >1 min ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Caleb Flakelar commented on Admin</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-info">
                              <i class="mdi mdi-account-plus"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Admin
                              <small class="fw-normal text-muted ms-1"
                                >1 hours ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >New user registered</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <h5 class="text-muted font-size-13 fw-normal mt-0">
                      Yesterday
                    </h5>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon">
                              <img
                                src="../src/assets/images/users/avatar-2.jpg"
                                class="img-fluid rounded-circle"
                                alt=""
                              />
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Cristina Pride
                              <small class="fw-normal text-muted ms-1"
                                >1 day ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Hi, How are you? What about our next
                              meeting</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <h5 class="text-muted font-size-13 fw-normal mt-0">
                      30 Dec 2021
                    </h5>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-primary">
                              <i class="mdi mdi-comment-account-outline"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Datacorp
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Caleb Flakelar commented on Admin</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon">
                              <img
                                src="../src/assets/images/users/avatar-4.jpg"
                                class="img-fluid rounded-circle"
                                alt=""
                              />
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Karen Robinson
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Wow ! this admin looks good and awesome
                              design</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <div class="text-center">
                      <i
                        class="mdi mdi-dots-circle mdi-spin text-muted h3 mt-0"
                      ></i>
                    </div>
                  </div>

                  <!-- All-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item text-center text-primary notify-item border-top border-light py-2"
                  >
                    View All
                  </a>
                </div>
              </li>

              <li class="nav-link" id="theme-mode">
                <i class="bx bx-moon font-size-24"></i>
              </li>

              <li class="dropdown">
                <a
                  class="nav-link dropdown-toggle nav-user me-0 waves-effect waves-light"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <img
                    src="../src/assets/images/users/avatar-4.jpg"
                    alt="user-image"
                    class="rounded-circle"
                  />
                  <span class="ms-1 d-none d-md-inline-block">
                    Jamie D. <i class="mdi mdi-chevron-down"></i>
                  </span>
                </a>
                <div class="dropdown-menu dropdown-menu-end profile-dropdown">
                  <!-- item-->
                  <div class="dropdown-header noti-title">
                    <h6 class="text-overflow m-0">Welcome !</h6>
                  </div>

                  <!-- item-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-user"></i>
                    <span>My Account</span>
                  </a>

                  <!-- item-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-settings"></i>
                    <span>Settings</span>
                  </a>

                  <!-- item-->
                  <a
                    href="pages-lock-screen.html"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-lock"></i>
                    <span>Lock Screen</span>
                  </a>

                  <div class="dropdown-divider"></div>

                  <!-- item-->
                  <a href="pages-login.html" class="dropdown-item notify-item">
                    <i class="fe-log-out"></i>
                    <span>Logout</span>
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- ========== Topbar End ========== -->

        <div class="px-3">
          <!-- Start Content-->
          <div class="container-fluid">
            <!-- start page title -->
            <div class="py-3 py-lg-4">
              <div class="row">
                <div class="col-lg-6">
                  <h4 class="page-title mb-0">Form Elements</h4>
                </div>
                <div class="col-lg-6">
                  <div class="d-none d-lg-block">
                    <ol class="breadcrumb m-0 float-end">
                      <li class="breadcrumb-item">
                        <a href="javascript: void(0);">Forms</a>
                      </li>
                      <li class="breadcrumb-item active">Form Elements</li>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
            <!-- end page title -->

            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Input Types</h4>
                    <p class="sub-header">
                      Most common form control, text-based input fields.
                      Includes support for all HTML5 types: <code>text</code>,
                      <code>password</code>, <code>datetime</code>,
                      <code>datetime-local</code>, <code>date</code>,
                      <code>month</code>, <code>time</code>, <code>week</code>,
                      <code>number</code>, <code>email</code>, <code>url</code>,
                      <code>search</code>, <code>tel</code>, and
                      <code>color</code>.
                    </p>

                    <div class="row">
                      <div class="col-12">
                        <div class="p-2">
                          <form class="form-horizontal" role="form">
                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="simpleinput"
                                >Text</label
                              >
                              <div class="col-md-10">
                                <input
                                  type="text"
                                  id="simpleinput"
                                  class="form-control"
                                  value="Some text value..."
                                />
                              </div>
                            </div>
                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="example-email"
                                >Email</label
                              >
                              <div class="col-md-10">
                                <input
                                  type="email"
                                  id="example-email"
                                  name="example-email"
                                  class="form-control"
                                  placeholder="Email"
                                />
                              </div>
                            </div>
                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="example-password"
                                >Password</label
                              >
                              <div class="col-md-10">
                                <input
                                  type="password"
                                  class="form-control"
                                  id="example-password"
                                  value="password"
                                />
                              </div>
                            </div>
                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="example-placeholder"
                                >Placeholder</label
                              >
                              <div class="col-md-10">
                                <input
                                  type="text"
                                  class="form-control"
                                  id="example-placeholder"
                                  placeholder="placeholder"
                                />
                              </div>
                            </div>
                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="example-textarea"
                                >Text area</label
                              >
                              <div class="col-md-10">
                                <textarea
                                  class="form-control"
                                  id="example-textarea"
                                  rows="5"
                                ></textarea>
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label class="col-md-2 col-form-label"
                                >Readonly</label
                              >
                              <div class="col-md-10">
                                <input
                                  type="text"
                                  class="form-control"
                                  readonly=""
                                  value="Readonly value"
                                />
                              </div>
                            </div>
                            <div class="mb-2 row">
                              <label class="col-md-2 col-form-label"
                                >Disabled</label
                              >
                              <div class="col-md-10">
                                <input
                                  type="text"
                                  class="form-control"
                                  disabled=""
                                  value="Disabled value"
                                />
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="example-static"
                                >Static control</label
                              >
                              <div class="col-md-10">
                                <input
                                  type="text"
                                  readonly=""
                                  class="form-control-plaintext"
                                  id="example-static"
                                  value="email@example.com"
                                />
                              </div>
                            </div>
                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="example-helping"
                                >Helping text</label
                              >
                              <div class="col-md-10">
                                <input
                                  type="text"
                                  class="form-control"
                                  id="example-helping"
                                  placeholder="Helping text"
                                />
                                <span class="help-block"
                                  ><small
                                    >A block of help text that breaks onto a new
                                    line and may extend beyond one line.</small
                                  ></span
                                >
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label class="col-md-2 col-form-label"
                                >Input Select</label
                              >
                              <div class="col-md-10">
                                <select class="form-control">
                                  <option>1</option>
                                  <option>2</option>
                                  <option>3</option>
                                  <option>4</option>
                                  <option>5</option>
                                </select>
                                <h6>Multiple select</h6>
                                <select multiple class="form-control">
                                  <option>1</option>
                                  <option>2</option>
                                  <option>3</option>
                                  <option>4</option>
                                  <option>5</option>
                                </select>
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="example-fileinput"
                                >Default file input</label
                              >
                              <div class="col-md-10">
                                <input
                                  type="file"
                                  class="form-control"
                                  id="example-fileinput"
                                />
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="example-date"
                                >Date</label
                              >
                              <div class="col-md-10">
                                <input
                                  class="form-control"
                                  type="date"
                                  name="date"
                                  id="example-date"
                                />
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="example-month"
                                >Month</label
                              >
                              <div class="col-md-10">
                                <input
                                  class="form-control"
                                  type="month"
                                  id="example-month"
                                  name="month"
                                />
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="example-time"
                                >Time</label
                              >
                              <div class="col-md-10">
                                <input
                                  class="form-control"
                                  type="time"
                                  id="example-time"
                                  name="time"
                                />
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="example-week"
                                >Week</label
                              >
                              <div class="col-md-10">
                                <input
                                  class="form-control"
                                  type="week"
                                  id="example-week"
                                  name="week"
                                />
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="example-number"
                                >Number</label
                              >
                              <div class="col-md-10">
                                <input
                                  class="form-control"
                                  type="number"
                                  id="example-number"
                                  name="number"
                                />
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label class="col-md-2 col-form-label">URL</label>
                              <div class="col-md-10">
                                <input
                                  class="form-control"
                                  type="url"
                                  name="url"
                                />
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label class="col-md-2 col-form-label"
                                >Search</label
                              >
                              <div class="col-md-10">
                                <input
                                  class="form-control"
                                  type="search"
                                  name="search"
                                />
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label class="col-md-2 col-form-label">Tel</label>
                              <div class="col-md-10">
                                <input
                                  class="form-control"
                                  type="tel"
                                  name="tel"
                                />
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="example-color"
                                >Color</label
                              >
                              <div class="col-md-10">
                                <input
                                  class="form-control form-control-color w-100"
                                  type="color"
                                  id="example-color"
                                  name="color"
                                  value="#3bafda"
                                />
                              </div>
                            </div>

                            <div class="mb-2 row">
                              <label
                                class="col-md-2 col-form-label"
                                for="form-range"
                                >Form range</label
                              >
                              <div class="col-md-10 align-self-center">
                                <input
                                  class="form-range"
                                  type="range"
                                  id="form-range"
                                  name="range"
                                  min="0"
                                  max="10"
                                />
                              </div>
                            </div>

                            <div class="row">
                              <label
                                for="exampleDataList"
                                class="col-md-2 col-form-label"
                                >Datalists</label
                              >
                              <div class="col-md-10">
                                <input
                                  class="form-control"
                                  list="datalistOptions"
                                  id="exampleDataList"
                                  placeholder="Type to search..."
                                />
                                <datalist id="datalistOptions">
                                  <option value="San Francisco"></option>
                                  <option value="New York"></option>
                                  <option value="Seattle"></option>
                                  <option value="Los Angeles"></option>
                                  <option value="Chicago"></option>
                                </datalist>
                              </div>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                    <!-- end row -->
                  </div>
                </div>
                <!-- end card -->
              </div>
              <!-- end col -->
            </div>
            <!-- end row -->

            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Select Menu</h4>
                    <p class="sub-header">
                      Custom <code>&lt;select&gt;</code> menus need only a
                      custom class, <code>.form-select</code> to trigger the
                      custom styles.
                    </p>

                    <select class="form-select">
                      <option selected>Open this select menu</option>
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                    </select>

                    <div class="mt-4">
                      <h5 class="font-size-14 mb-1">Select Menu Sizing</h5>
                      <p class="sub-header mb-0">
                        You may also choose from small and large custom selects
                        to match our similarly sized text inputs.
                      </p>

                      <div class="row">
                        <div class="col-lg-6">
                          <div class="mt-3">
                            <label class="form-label">Large Form Select</label>
                            <select
                              class="form-select form-select-lg"
                              aria-label=".form-select-lg example"
                            >
                              <option selected>Open this select menu</option>
                              <option value="1">One</option>
                              <option value="2">Two</option>
                              <option value="3">Three</option>
                            </select>
                          </div>
                        </div>

                        <div class="col-lg-6">
                          <div class="mt-3">
                            <label class="form-label">Small Form Select</label>
                            <select
                              class="form-select form-select-sm"
                              aria-label=".form-select-sm example"
                            >
                              <option selected>Open this select menu</option>
                              <option value="1">One</option>
                              <option value="2">Two</option>
                              <option value="3">Three</option>
                            </select>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- end card -->
              </div>
              <!-- end col -->
            </div>
            <!-- end row -->

            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Checkboxes & radios</h4>

                    <div class="row">
                      <div class="col-md-6">
                        <div class="mt-3">
                          <h5 class="font-size-14 mb-2">Checkbox</h5>

                          <div class="form-check">
                            <input
                              class="form-check-input"
                              type="checkbox"
                              value=""
                              id="flexCheckDefault"
                            />
                            <label
                              class="form-check-label"
                              for="flexCheckDefault"
                            >
                              Default checkbox
                            </label>
                          </div>
                          <div class="form-check">
                            <input
                              class="form-check-input"
                              type="checkbox"
                              value=""
                              id="flexCheckChecked"
                              checked
                            />
                            <label
                              class="form-check-label"
                              for="flexCheckChecked"
                            >
                              Checked checkbox
                            </label>
                          </div>
                        </div>
                      </div>

                      <div class="col-md-6">
                        <div class="mt-3">
                          <h5 class="font-size-14 mb-2">Radios</h5>

                          <div class="form-check">
                            <input
                              class="form-check-input"
                              type="radio"
                              name="flexRadioDefault"
                              id="flexRadioDefault1"
                            />
                            <label
                              class="form-check-label"
                              for="flexRadioDefault1"
                            >
                              Default radio
                            </label>
                          </div>
                          <div class="form-check">
                            <input
                              class="form-check-input"
                              type="radio"
                              name="flexRadioDefault"
                              id="flexRadioDefault2"
                              checked
                            />
                            <label
                              class="form-check-label"
                              for="flexRadioDefault2"
                            >
                              Default checked radio
                            </label>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div>
                      <h4 class="header-title mt-4">Switches</h4>
                      <p class="sub-header">
                        A switch has the markup of a custom checkbox but uses
                        the <code>.form-switch</code> class to render a toggle
                        switch. Switches also support the
                        <code>disabled</code> attribute.
                      </p>

                      <div class="form-check form-switch">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          id="flexSwitchCheckDefault"
                        />
                        <label
                          class="form-check-label"
                          for="flexSwitchCheckDefault"
                          >Default switch checkbox input</label
                        >
                      </div>
                      <div class="form-check form-switch">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          id="flexSwitchCheckChecked"
                          checked
                        />
                        <label
                          class="form-check-label"
                          for="flexSwitchCheckChecked"
                          >Checked switch checkbox input</label
                        >
                      </div>
                      <div class="form-check form-switch">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          id="flexSwitchCheckDisabled"
                          disabled
                        />
                        <label
                          class="form-check-label"
                          for="flexSwitchCheckDisabled"
                          >Disabled switch checkbox input</label
                        >
                      </div>
                      <div class="form-check form-switch">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          id="flexSwitchCheckCheckedDisabled"
                          checked
                          disabled
                        />
                        <label
                          class="form-check-label"
                          for="flexSwitchCheckCheckedDisabled"
                          >Disabled checked switch checkbox input</label
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <!-- end card -->
              </div>
              <!-- end col -->
            </div>
            <!-- end row -->

            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Input Sizes & Group</h4>
                    <p class="sub-header">
                      Set heights using classes like <code>.input-lg</code>, and
                      set widths using grid column classes like
                      <code>.col-lg-*</code>.
                    </p>

                    <div class="p-2">
                      <form role="form" class="form-horizontal">
                        <div class="mb-2 row">
                          <label
                            class="col-md-2 col-form-label"
                            for="example-input-small"
                            >Small</label
                          >
                          <div class="col-md-10">
                            <input
                              type="text"
                              id="example-input-small"
                              name="example-input-small"
                              class="form-control form-control-sm"
                              placeholder=".input-sm"
                            />
                          </div>
                        </div>

                        <div class="mb-2 row">
                          <label
                            class="col-md-2 col-form-label"
                            for="example-input-normal"
                            >Normal</label
                          >
                          <div class="col-md-10">
                            <input
                              type="text"
                              id="example-input-normal"
                              name="example-input-normal"
                              class="form-control"
                              placeholder="Normal"
                            />
                          </div>
                        </div>

                        <div class="mb-2 row">
                          <label
                            class="col-md-2 col-form-label"
                            for="example-input-large"
                            >Large</label
                          >
                          <div class="col-md-10">
                            <input
                              type="text"
                              id="example-input-large"
                              name="example-input-large"
                              class="form-control form-control-lg"
                              placeholder=".input-lg"
                            />
                          </div>
                        </div>

                        <div class="mb-2 row">
                          <label class="col-md-2 col-form-label"
                            >Grid Sizes</label
                          >
                          <div class="col-md-4">
                            <input
                              type="text"
                              class="form-control"
                              placeholder=".col-md-4"
                            />
                          </div>
                        </div>

                        <div class="mb-2 row">
                          <label class="col-md-2 col-form-label">Static</label>
                          <div class="col-md-10">
                            <div class="input-group">
                              <span class="input-group-text" id="basic-addon1"
                                >@</span
                              >
                              <input
                                type="text"
                                class="form-control"
                                placeholder="Username"
                                aria-label="Username"
                                aria-describedby="basic-addon1"
                              />
                            </div>
                          </div>
                        </div>

                        <div class="mb-2 row">
                          <label class="col-md-2 col-form-label"
                            >Dropdowns</label
                          >
                          <div class="col-md-10">
                            <div class="input-group mb-3">
                              <button
                                class="btn btn-primary waves-effect waves-light dropdown-toggle"
                                type="button"
                                data-bs-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                              >
                                Dropdown <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#"
                                  >Another action</a
                                >
                                <a class="dropdown-item" href="#"
                                  >Something else here</a
                                >
                                <div
                                  role="separator"
                                  class="dropdown-divider"
                                ></div>
                                <a class="dropdown-item" href="#"
                                  >Separated link</a
                                >
                              </div>
                              <input
                                type="text"
                                class="form-control"
                                placeholder=""
                                aria-label=""
                                aria-describedby="basic-addon1"
                              />
                            </div>
                          </div>
                        </div>

                        <div class="row">
                          <label class="col-md-2 col-form-label">Buttons</label>
                          <div class="col-md-10">
                            <div class="input-group">
                              <input
                                type="text"
                                class="form-control"
                                placeholder="Recipient's username"
                                aria-label="Recipient's username"
                              />

                              <button
                                class="btn btn-dark waves-effect waves-light"
                                type="button"
                              >
                                Button
                              </button>
                            </div>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
                <!-- end card -->
              </div>
              <!-- end col -->
            </div>
            <!-- end row -->

            <div class="row">
              <div class="col-lg-6">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title mb-3">Basic Example</h4>

                    <form role="form">
                      <div class="mb-2">
                        <label for="exampleInputEmail1" class="form-label"
                          >Email address</label
                        >
                        <input
                          type="email"
                          class="form-control"
                          id="exampleInputEmail1"
                          aria-describedby="emailHelp"
                        />
                        <div id="emailHelp" class="form-text">
                          We'll never share your email with anyone else.
                        </div>
                      </div>
                      <div class="mb-2">
                        <label for="exampleInputPassword1" class="form-label"
                          >Password</label
                        >
                        <input
                          type="password"
                          class="form-control"
                          id="exampleInputPassword1"
                        />
                      </div>
                      <div class="mb-2 form-check">
                        <input
                          type="checkbox"
                          class="form-check-input"
                          id="exampleCheck1"
                        />
                        <label class="form-check-label" for="exampleCheck1"
                          >Check me out</label
                        >
                      </div>
                      <button type="submit" class="btn btn-primary">
                        Submit
                      </button>
                    </form>
                  </div>
                </div>
              </div>
              <!-- end col -->

              <div class="col-lg-6">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title mb-3">Horizontal form</h4>

                    <form role="form">
                      <div class="row mb-3">
                        <label for="inputEmail3" class="col-sm-3 col-form-label"
                          >Email</label
                        >
                        <div class="col-sm-9">
                          <input
                            type="email"
                            class="form-control"
                            id="inputEmail3"
                            placeholder="Email"
                          />
                        </div>
                      </div>
                      <div class="row mb-3">
                        <label
                          for="inputPassword3"
                          class="col-sm-3 col-form-label"
                          >Password</label
                        >
                        <div class="col-sm-9">
                          <input
                            type="password"
                            class="form-control"
                            id="inputPassword3"
                            placeholder="Password"
                          />
                        </div>
                      </div>
                      <div class="row mb-2">
                        <label
                          for="inputPassword5"
                          class="col-sm-3 col-form-label"
                          >Re Password</label
                        >
                        <div class="col-sm-9">
                          <input
                            type="password"
                            class="form-control"
                            id="inputPassword5"
                            placeholder="Retype Password"
                          />
                        </div>
                      </div>
                      <div class="row justify-content-end mb-2">
                        <div class="col-sm-9">
                          <div class="form-check">
                            <input
                              type="checkbox"
                              class="form-check-input"
                              id="checkmeout"
                            />
                            <label class="form-check-label" for="checkmeout"
                              >Check me out</label
                            >
                          </div>
                        </div>
                      </div>
                      <div class="justify-content-end row">
                        <div class="col-sm-9">
                          <button
                            type="submit"
                            class="btn btn-info waves-effect waves-light"
                          >
                            Sign in
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <!-- end row -->

            <!-- Inline Form -->
            <div class="row">
              <div class="col-md-12">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Inline Form</h4>
                    <p class="sub-header">
                      Use the <code>.col-auto</code> class to create horizontal
                      layouts.
                    </p>
                    <form class="row row-cols-lg-auto g-3 align-items-center">
                      <div class="col-12">
                        <label for="staticEmail2" class="visually-hidden"
                          >Email</label
                        >
                        <input
                          type="text"
                          readonly
                          class="form-control-plaintext"
                          id="staticEmail2"
                          value="email@example.com"
                        />
                      </div>
                      <div class="col-12">
                        <label for="inputPassword2" class="visually-hidden"
                          >Password</label
                        >
                        <input
                          type="password"
                          class="form-control"
                          id="inputPassword2"
                          placeholder="Password"
                        />
                      </div>
                      <button type="submit" class="btn btn-primary">
                        Confirm identity
                      </button>
                    </form>

                    <div class="row">
                      <h6 class="font-size-13 mt-4">Auto-sizing</h6>

                      <form>
                        <div class="row gy-2 gx-3 align-items-center">
                          <div class="col-auto">
                            <label class="visually-hidden" for="inlineFormInput"
                              >Name</label
                            >
                            <input
                              type="text"
                              class="form-control"
                              id="inlineFormInput"
                              placeholder="Jane Doe"
                            />
                          </div>
                          <div class="col-auto">
                            <label
                              class="visually-hidden"
                              for="inlineFormInputGroup"
                              >Username</label
                            >
                            <div class="input-group">
                              <div class="input-group-text">@</div>
                              <input
                                type="text"
                                class="form-control"
                                id="inlineFormInputGroup"
                                placeholder="Username"
                              />
                            </div>
                          </div>
                          <div class="col-auto">
                            <div class="form-check">
                              <input
                                class="form-check-input"
                                type="checkbox"
                                id="autoSizingCheck"
                              />
                              <label
                                class="form-check-label"
                                for="autoSizingCheck"
                              >
                                Remember me
                              </label>
                            </div>
                          </div>
                          <div class="col-auto">
                            <button type="submit" class="btn btn-primary">
                              Submit
                            </button>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- end row -->

            <!-- Form row -->
            <div class="row">
              <div class="col-xl-6">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Form grid</h4>
                    <p class="sub-header">
                      You may also swap <code>.row</code> for <code>.row</code>,
                      a variation of our standard grid row that overrides the
                      default column gutters for tighter and more compact
                      layouts.
                    </p>

                    <form>
                      <div class="row">
                        <div class="mb-2 col-md-6">
                          <label for="inputEmail4" class="form-label"
                            >Email</label
                          >
                          <input
                            type="email"
                            class="form-control"
                            id="inputEmail4"
                            placeholder="Email"
                          />
                        </div>
                        <div class="mb-2 col-md-6">
                          <label for="inputPassword4" class="form-label"
                            >Password</label
                          >
                          <input
                            type="password"
                            class="form-control"
                            id="inputPassword4"
                            placeholder="Password"
                          />
                        </div>
                      </div>
                      <div class="mb-2">
                        <label for="inputAddress" class="form-label"
                          >Address</label
                        >
                        <input
                          type="text"
                          class="form-control"
                          id="inputAddress"
                          placeholder="1234 Main St"
                        />
                      </div>

                      <div class="row">
                        <div class="mb-2 col-md-4">
                          <label for="inputState" class="form-label"
                            >State</label
                          >
                          <select id="inputState" class="form-select">
                            <option>Choose</option>
                            <option>Option 1</option>
                            <option>Option 2</option>
                            <option>Option 3</option>
                          </select>
                        </div>

                        <div class="mb-2 col-md-4">
                          <label for="inputCity" class="form-label">City</label>
                          <input
                            type="text"
                            class="form-control"
                            id="inputCity"
                          />
                        </div>

                        <div class="mb-2 col-md-4">
                          <label for="inputZip" class="form-label">Zip</label>
                          <input
                            type="text"
                            class="form-control"
                            id="inputZip"
                          />
                        </div>
                      </div>
                      <div class="mb-3">
                        <div class="form-check">
                          <input
                            class="form-check-input"
                            type="checkbox"
                            id="Check"
                          />
                          <label class="form-check-label" for="Check">
                            Check me out
                          </label>
                        </div>
                      </div>
                      <button type="submit" class="btn btn-primary">
                        Sign in
                      </button>
                    </form>
                  </div>
                </div>
              </div>
              <!-- end col -->

              <div class="col-xl-6">
                <div class="card">
                  <div class="card-body">
                    <h5 class="header-title">Floating labels</h5>
                    <p class="sub-header">
                      Create beautifully simple form labels that float over your
                      input fields.
                    </p>

                    <form>
                      <div class="form-floating mb-3">
                        <input
                          type="text"
                          class="form-control"
                          id="floatingnameInput"
                          placeholder="Enter Name"
                          value="Nik Patel"
                        />
                        <label for="floatingnameInput">Name</label>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-floating mb-3">
                            <input
                              type="email"
                              class="form-control"
                              id="floatingemailInput"
                              placeholder="Enter Email address"
                              value="name@example.com"
                            />
                            <label for="floatingemailInput"
                              >Email address</label
                            >
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-floating mb-3">
                            <select
                              class="form-select"
                              id="floatingSelectGrid"
                              aria-label="Floating label select example"
                            >
                              <option selected>Open this select menu</option>
                              <option value="1">One</option>
                              <option value="2">Two</option>
                              <option value="3">Three</option>
                            </select>
                            <label for="floatingSelectGrid"
                              >Works with selects</label
                            >
                          </div>
                        </div>
                      </div>

                      <div class="form-floating mb-2">
                        <textarea
                          class="form-control"
                          placeholder="Leave a comment here"
                          id="floatingTextarea"
                          style="height: 100px"
                        >
123, Main st</textarea
                        >
                        <label for="floatingTextarea">Comments</label>
                      </div>

                      <div class="mb-3">
                        <div class="form-check">
                          <input
                            class="form-check-input"
                            type="checkbox"
                            id="floatingCheck"
                          />
                          <label class="form-check-label" for="floatingCheck">
                            Check me out
                          </label>
                        </div>
                      </div>
                      <div>
                        <button type="submit" class="btn btn-primary w-md">
                          Submit
                        </button>
                      </div>
                    </form>
                  </div>
                  <!-- end card body -->
                </div>
                <!-- end card -->
              </div>
              <!-- end col -->
            </div>
            <!-- end row -->
          </div>
          <!-- container -->
        </div>
        <!-- content -->

        <!-- Footer Start -->
        <footer class="footer">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-6">
                <div>
                  <script>
                    document.write(new Date().getFullYear());
                  </script>
                  © Dashtrap
                </div>
              </div>
              <div class="col-md-6">
                <div
                  class="d-none d-md-flex gap-4 align-item-center justify-content-md-end"
                >
                  <p class="mb-0">
                    Design & Develop by
                    <a href="https://myrathemes.com/" target="_blank"
                      >MyraStudio</a
                    >
                  </p>
                </div>
              </div>
            </div>
          </div>
        </footer>
        <!-- end Footer -->
      </div>
      <!-- End Page content -->
    </div>
    <!-- END wrapper -->

    <!-- App js -->
    <script src="../src/assets/js/vendor.min.js"></script>
    <script src="../src/assets/js/app.js"></script>
  </body>
</html>
